<template>
  <div>
    <h3>自定义指令</h3>
    <!-- 操作dom的 -->

    <!-- <div class="box" v-abc="true">
        123
    </div> -->

    <div v-if="flag" v-wang>
        3333 - {{ count }}
    </div>
    <button @click="count += 1">++</button>
    <button @click="flag = false">解绑</button>
  </div>
</template>

<script>
// 全局自定义指令

// 局部自定义指令
export default {
    data() {
        return {
            count: 100,
            flag: true
        }
    },
    directives: {
        // 简写自定义指令
        // abc(el, option) {
        //     // el  当前的节点
        //     // option   当执行的信息 (名称, =后面的value)
        //     if (option.value) {
        //         el.style.display = "block"
        //     } else {
        //         el.style.display = "none"
        //     }
        // }

        // 正常写法
        wang: {
            // 第一次绑定到元素时调用
            bind() {
                console.log('首次绑定')
            },
            // 被绑定**元素**插入父节点时调用
            inserted() {
                console.log('dom结构插入到父节点')
            },
            // 数据更新时调用
            update() {
                console.log('更新')
            },
            // componentUpdated  指定元素及子节点更新完成后会触发
            // 取消绑定后触发
            unbind() {
                console.log('解绑')
            }
        }
    }
}
</script>

<style>

</style>